<template>
  <!-- 测试全局组件
  疑问：组件没有全局注册，直接使用？？
  说明：自动按需引入组件除了可以自动按需注册vant组件之外，还能把src/components目录下的组件，也自动
  按需注册，注册的时候使用== 组件名 ==作为元素名
  -->
  <!-- <cp-nav-bar title="1" right-text="123" @click-right="fn"></cp-nav-bar> -->
  <!-- 
   vue2: v-model（语法糖）= :value + @input(一个元素身上只能使用一个)
   == vue3:
   1. 默认写法：  v-model（语法糖）= :modelValue + @update:modelValue （写一个）
   2. 指定名字：  v-model:变量名 = :变量名 + @update:变量名 （写多个）
   双向绑定本质上还是=》父子通信
 -->
  <ElDialog v-model="count" v-model:show="show"></ElDialog>
  <!-- <ElDialog :modelValue="count" @update:modelValue="count = $event"></ElDialog> -->
  <p>
    <button @click="show = !show">打开弹层</button>
  </p>
  <div style="padding-top: 46px">
    <ul>
      <!-- 说明：token太长，出现横向滚动条 -->
      <!-- <li>{{ store.user.token }}</li> -->
      <li>
        <button @click="setToken">存储token</button>
      </li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <!-- 1. 测试vant组件 -->
    <van-button type="primary">主要按钮</van-button>
    <van-button type="success">成功按钮</van-button>
    <van-button type="default">默认按钮</van-button>
    <van-button type="warning">警告按钮</van-button>
    <van-button type="danger">危险按钮</van-button>
  </div>
  <!-- 2. 测试css转vw => 注意：行内样式不会自动转化-->
  <div class="box">我是box盒子</div>
  <div style="font-size: 24px">我是test盒子</div>
  <!-- 3. 测试原生css变量 -->
  <div class="meng-box">meng-box</div>
  <!-- 4. 测试request封装 -->
  <van-button type="primary" @click="getUserInfo">获取个人信息</van-button>
  <van-button type="primary" @click="login">登录</van-button>
  <!-- 5. 使用svg图标 -->
  <div>
    <p>
      <img src="@/icons/login/eye-on.svg" alt="" />
    </p>
    <!-- 使用精灵图获取某个图片 -->
    <!-- 理想：封装成组件使用 -->
    <div style="font-size: 24px">
      <cp-icon name="login-eye-off"></cp-icon>
    </div>
    <cp-icon name="login-eye-on"></cp-icon>

    <!-- <svg aria-hidden="true">
      <use href="#icon-login-eye-off" />
    </svg>
    <svg aria-hidden="true">
      <use href="#icon-login-eye-off" />
    </svg> -->
  </div>
</template>

<script setup lang="ts">
// import useUserStore from '@/stores/modules/user'
import { useUserStore } from '@/stores'
import { request } from '@/utils/request'
import type { User } from '@/types/login'
// 导入子组件
import ElDialog from './SonDialog.vue'
import { ref } from 'vue'

// 双向绑定的变量
const count = ref(1)
// 控制弹层显示
const show = ref(false)

// 获取用户store
const store = useUserStore()
const setToken = () => {
  store.setUser({
    token: 'dfd123'
  })
}
const fn = () => {
  console.log('父组件fn执行了')
}
// 测试，请求拦截器，是否携带token，响应拦截器401拦截到登录地址（需要有token才能正常调用）
const getUserInfo = async () => {
  const res = await request.get('/patient/myUser')
  console.log(res)
}
// 测试，登录成功或失败
const login = async () => {
  const res = await request.post<any, User>('/login/password', {
    mobile: '13211112222',
    // 密码 abc123456 测试：出现非10000的情况
    password: 'abc12345000'
  })
  store.setUser(res)
}
</script>

<style scoped>
.box {
  font-size: 18px;
  color: pink;
  border: var(--meng-bd);
}
</style>
